<template>
  <div class="dashboard-form">
    <div class="setting-title">画板配置</div>
    <div class="setting-content">
      <div class="size-setting-box">
        <!-- 宽度设置 -->
        <div class="width-config">
          <div class="label">宽度</div>
          <div class="config-box">
            <a-input-number
              size="small"
              class="input-box"
              :max="1920"
              :min="800"
              :value="dataStore.layoutData.width"
              @change="handleWidthChange"
            />
            <span class="sub">px</span>
          </div>
        </div>
        <div class="divider"></div>
        <!-- 仪表板主题设置 -->
        <div class="setting-item">
          <div
            class="node-style-layout-header"
            @click="panelThemeClose = !panelThemeClose"
          >
            仪表板主题
            <span class="arrow-icon">
              <a-icon :type="panelThemeClose ? 'right' : 'down'" />
            </span>
          </div>
          <div
            class="node-style-content"
            style="padding: 0;"
            :class="{ 'close-fold': panelThemeClose }"
          >
            <div class="sub-item">
              <p>主题模版</p>
              <div class="theme-list">
                <div
                  v-for="(item, i) in themeList"
                  :key="i"
                  class="theme-item"
                  :class="{ active: currentThemeName === item.name }"
                  @click.stop="selectTheme(item.name)"
                >
                  <img
                    :src="`${publicPath}${item.src}`"
                    alt="theme-pic"
                    class="theme-pic"
                  />
                  <span class="theme-name">
                    {{ item.label }}
                  </span>
                </div>
              </div>
            </div>
            <div class="sub-item">
              <span style="margin-right: 30px;">色系</span>
              <span
                v-for="(color, i) in colorSystem.slice(0, 8)"
                :key="`color-${i}`"
                class="theme-color"
                :style="{ backgroundColor: color }"
              >
              </span>
            </div>
          </div>
        </div>
        <div class="divider"></div>
        <!-- 仪表板设置 -->
        <div class="setting-item">
          <div
            class="node-style-layout-header"
            @click="panelSettingClose = !panelSettingClose"
          >
            仪表板设置
            <span class="arrow-icon">
              <a-icon :type="panelSettingClose ? 'right' : 'down'" />
            </span>
          </div>
          <div
            class="node-style-content"
            style="padding: 0;"
            :class="{ 'close-fold': panelSettingClose }"
          >
            <!-- 仪表板背景 -->
            <div class="sub-item">
              <p>仪表板背景</p>
              <div class="bg-list">
                <div v-for="(item, i) in bgList" :key="i">
                  <div
                    v-show="
                      !(
                        item.name === 'pure' &&
                        ['nebula', 'blue'].includes(currentThemeName)
                      )
                    "
                    class="theme-item"
                    :class="{ active: panelBg === item.name }"
                    @click.stop="selectPanelBg(item.name)"
                  >
                    <a-icon-font :type="item.iconSrc" class="bg-icon" />
                    <span class="theme-name">
                      {{ item.label }}
                    </span>
                  </div>
                </div>
              </div>
              <div v-if="panelBg === 'pure'" class="color-list">
                <div
                  v-for="(item, i) in pureBgColorList[currentThemeName]"
                  :key="i"
                  class="color-item"
                  :class="{ active: panelPureColor === item }"
                  @click.stop="changePanelColor(item)"
                >
                  <div
                    class="color-name"
                    :style="{
                      background: item,
                    }"
                  ></div>
                </div>
                <div
                  v-show="!['nebula', 'blue'].includes(currentThemeName)"
                  class="color-item"
                  :class="{
                    active: ![
                      '#E6ECFE',
                      '#ECEFF7',
                      '#4150AD',
                      '#2E3458',
                      '#F3F3F7',
                      '#080B1C',
                      '#EFF1FE',
                      '#EAEAFD',
                    ].includes(panelPureColor),
                  }"
                >
                  <color-picker
                    size="small"
                    :value="panelPureColor"
                    display="text"
                    @change="changePanelColor"
                  />
                </div>
              </div>
            </div>
            <!-- 组件背景 -->
            <div class="sub-item">
              <p>组件背景</p>
              <div class="bg-list">
                <div v-for="(item, i) in bgList" :key="i">
                  <div
                    v-show="
                      !(
                        item.name === 'pure' &&
                        ['blue', 'textured', 'simple'].includes(
                          currentThemeName
                        )
                      )
                    "
                    class="theme-item"
                    :class="{ active: componentBg === item.name }"
                    @click.stop="selectCompentBg(item.name)"
                  >
                    <a-icon-font :type="item.iconSrc" class="bg-icon" />
                    <span class="theme-name">
                      {{ item.label }}
                    </span>
                  </div>
                </div>
              </div>
              <div v-if="componentBg === 'pure'" class="color-list">
                <div
                  v-for="(item, i) in pureCompColorList[currentThemeName]"
                  :key="i"
                  class="color-item"
                  :class="{ active: componentPureColor === item }"
                  @click.stop="changeComponentColor(item)"
                >
                  <div
                    class="color-name"
                    :style="{
                      background: item,
                    }"
                  ></div>
                </div>
                <!-- <div
                  v-show="!['blue'].includes(currentThemeName)"
                  class="color-item"
                  :class="{
                    active: ![
                      '#CFDFFC',
                      '#B3D5FF',
                      '#202742',
                      '#212A5B',
                      '#033053',
                      '#212A5B',
                    ].includes(componentPureColor),
                  }"
                >
                  <color-picker
                    size="small"
                    :value="componentPureColor"
                    display="text"
                    @change="changeComponentColor"
                  />
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import { publicPath } from '@/api/constants'
import VisualizationStore from '@/store/modules/visualization'
import ColorPicker from '@/components/form/color-picker.vue'

@Component({
  components: {
    ColorPicker,
  },
})
export default class PanelForm extends Vue {
  //  仪表板主题part 是否收起
  private panelThemeClose: boolean = false
  //  仪表板设置part 是否收起
  private panelSettingClose: boolean = false
  private publicPath = publicPath
  //  主题模版列表
  private themeList = [
    // 暗黑 星云 科技蓝
    {
      name: 'light',
      label: '浅色',
      src: '/img/vis-sys/light.png',
    },
    {
      name: 'textured',
      label: '质感',
      src: '/img/vis-sys/textured.png',
    },
    {
      name: 'dark',
      label: '暗黑',
      src: '/img/vis-sys/dark.png',
    },
    {
      name: 'nebula',
      label: '星云',
      src: '/img/vis-sys/nebula.png',
    },
    {
      name: 'blue',
      label: '科技蓝',
      src: '/img/vis-sys/blue.png',
    },
    {
      name: 'simple',
      label: '简约',
      src: '/img/vis-sys/simple.png',
    },
  ]
  //  仪表板背景列表
  private bgList = [
    {
      name: 'default',
      label: '默认',
      iconSrc: 'iconmoren',
    },
    {
      name: 'pure',
      label: '纯色',
      iconSrc: 'iconchunse',
    },
  ]
  //  仪表板背景 - 纯色背景列表
  private pureBgColorList: any = {
    light: ['#E6ECFE', '#ECEFF7'],
    textured: ['#E6ECFE', '#ECEFF7'],
    simple: ['#E6ECFE', '#ECEFF7'],
    dark: ['#4150AD', '#2E3458'],
  }
  //  组件板背景 - 纯色背景列表
  private pureCompColorList: any = {
    light: ['rgb(207, 223, 252)', 'rgb(179, 213, 255)'],
    dark: ['rgb(32, 39, 66)', 'rgb(33, 42, 91)'],
    nebula: ['rgb(3, 48, 83, 0.6)', 'rgb(33, 42, 91, 0.6)'],
  }

  private panelBgColorList: any = {
    light: '#F3F3F7',
    textured: '#EAEAFD',
    simple: '#EFF1FE',
    dark: '#080B1C',
    blue: '#080B1C',
    nebula: '#080B1C',
  }

  private componentBgColorList: any = {
    light: 'rgb(255,255,255)',
    blue: 'rgb(255,255,255)',
    textured: 'rgba(255, 255, 255, 0.55)',
    simple: 'rgba(255, 255, 255, 0.45)',
    dark: 'rgb(24, 30, 52)',
    nebula: 'rgb(1, 17, 35, 0.6)',
  }

  public get dataStore() {
    return VisualizationStore
  }

  private get currentThemeName() {
    return VisualizationStore.layoutData.themeSetting.theme
  }
  //  仪表板背景默认值 - 'default', 'pure'
  private panelBg = 'default'
  //  组件背景默认值 - 'default', 'pure'
  private componentBg = 'default'

  private get panelPureColor() {
    return VisualizationStore.layoutData.themeSetting.panelBg.color
  }
  private get componentPureColor() {
    return VisualizationStore.layoutData.themeSetting.componentBg.color
  }

  private get themeSetting() {
    return VisualizationStore.layoutData.themeSetting
  }

  @Watch('themeSetting', { deep: true })
  private handleThemeConfig(newValue: any) {
    if (newValue) {
      this.panelBg = newValue.panelBg.type
      this.componentBg = newValue.componentBg.type
    }
  }

  mounted() {
    //  初始化仪表板背景，组件背景
    this.panelBg = this.themeSetting.panelBg.type
    this.componentBg = this.themeSetting.componentBg.type
  }

  /**
   * 选择主题模版
   */
  public selectTheme(name: string) {
    this.dataStore.setThemeType(name)
    //  设置的仪表板背景and 组件背景 为默认值
    this.dataStore.setPanelBg({
      type: 'default',
      color: this.panelBgColorList[this.currentThemeName],
    })

    this.dataStore.setComponentBg({
      type: 'default',
      color: this.componentBgColorList[this.currentThemeName],
    })

    this.dataStore.setAllGridListTheme()

    this.panelBg = 'default'
    this.componentBg = 'default'

    VisualizationStore.eventBus.$emit('theme-change')
  }
  /**
   * 设置仪表板背景配置
   */
  private selectPanelBg(name: string) {
    this.panelBg = name
    const result = this.panelBgColorList[this.currentThemeName]

    if (
      name === 'default' &&
      VisualizationStore.layoutData.themeSetting.panelBg.type !== 'default'
    ) {
      this.dataStore.setPanelBg({
        type: name,
        color: result,
      })
      VisualizationStore.eventBus.$emit('panel-color-change')
    }
  }
  /**
   * 改变仪表板纯色颜色
   */
  private changePanelColor(name: any) {
    this.dataStore.setPanelBg({
      type: 'pure',
      color: name,
    })
    VisualizationStore.eventBus.$emit('panel-color-change')
  }

  /**
   * 设置组件背景配置
   */
  private selectCompentBg(name: string) {
    this.componentBg = name
    const result = this.componentBgColorList[this.currentThemeName]
    //  默认的选择会直接生效；纯色需要选择子的颜色才会生效，见changeComponentColor
    if (
      name === 'default' &&
      VisualizationStore.layoutData.themeSetting.componentBg.type !== 'default'
    ) {
      this.dataStore.setComponentBg({
        type: name,
        color: result,
      })
    }
  }
  //  改变组件纯色颜色
  private changeComponentColor(name: any) {
    this.dataStore.setComponentBg({
      type: 'pure',
      color: name,
    })
  }
  /**
   * 宽度设置变化
   */
  private handleWidthChange(value: any) {
    this.$emit('widthchange', value)
  }

  /**
   * 色系显示，目前仅展示一种，不可选
   */
  private get colorSystem() {
    return this.currentThemeName === 'nebula'
      ? [
          '#65DCB8',
          '#1EB8E0',
          '#FBC94B',
          '#EF7C52',
          '#F595C6',
          '#7B88F2',
          '#16A37E',
          '#E9DF6C',
        ]
      : [
          '#5760e6',
          '#FBC94B',
          '#65DCB8',
          '#EF7D52',
          '#F596C6',
          '#687B9D',
          '#5EC6D7',
          '#FFA65E',
        ]
  }
}
</script>

<style lang="less" scoped>
.dashboard-form {
  height: 100%;

  .setting-title {
    border-bottom: 1px solid #ddd;
    color: #5d637e;
    font-size: 14px;
    font-weight: bold;
    height: 46px !important;
    line-height: 46px;
    position: relative;
    text-align: center;

    &::after {
      background: #06f;
      content: ' ';
      height: 2px;
      width: 58px;
    }
  }

  .setting-content {
    box-sizing: border-box;
    height: 100%;
    padding: 10px;
    position: relative;
    width: 100%;
  }

  .size-setting-box {
    display: block;
    flex-flow: row nowrap;
    height: 90%;
    justify-content: space-between;
    overflow-y: scroll;
    padding: 0 10px;
    position: relative;
    width: 100%;

    .setting-item {
      display: block;
      flex-flow: column wrap;
      justify-content: flex-start;
    }

    &::-webkit-scrollbar {
      visibility: hidden;
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(144, 147, 153, 0.5);
      border-radius: 6px;
      visibility: hidden;
    }

    &:hover {
      &::-webkit-scrollbar {
        visibility: visible;
      }

      &::-webkit-scrollbar-thumb {
        visibility: visible;
      }
    }

    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 5px;
    }
  }

  .setting-item {
    display: block;
    flex-flow: column wrap;
    justify-content: flex-start;
  }

  // header
  .node-style-layout-header {
    align-items: center;
    background-color: #f9f9fc;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 800;
    height: 38px;
    justify-content: space-between;
    letter-spacing: 1px;
    margin-bottom: 12px;
    user-select: none;

    > span {
      color: #5d637e;
      font-weight: 600;
      letter-spacing: 1px;
    }
  }

  .close-fold {
    display: none;
  }

  .divider {
    border-top: 1px solid #e9e9e9;
    height: 1px;
    left: 0;
    margin: 0;
    position: absolute;
    width: 100%;
  }

  .theme-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .theme-item {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 14px;
    margin-right: 18.5px;
  }

  .theme-pic {
    border: 1px solid transparent;
    box-sizing: content-box;
    height: 56px;
    padding: 5px;
    width: 90px;
  }

  .theme-color {
    display: inline-block;
    height: 22px;
    vertical-align: top;
    width: 18px;
  }

  .sub-item {
    margin-bottom: 20px;
  }

  .active {
    .theme-pic {
      border: 1px solid #6771ff;
      border-radius: 2px;
    }

    .theme-name {
      color: #6973ff;
    }

    .bg-icon {
      border: 1px solid #6771ff !important;
    }
  }

  .bg-list {
    display: flex;
    margin-left: 10px;

    .bg-icon {
      border: 1px solid #e9e9e9;
      border-radius: 2px;
      font-size: 28px;
      padding: 8px;
    }
  }

  .color-list {
    display: flex;
    height: 32px;
  }

  .color-item {
    border: 1px solid #e9e9e9;
    border-radius: 2px;
    cursor: pointer;
    height: 32px;
    line-height: 32px;
    margin: 5px 10px;
    text-align: center;
    width: 60px;

    .color-name {
      height: 24px;
      margin: 3px auto;
      width: 52px;
    }
  }

  .active.color-item {
    border: 1px solid #6771ff;
  }

  .width-config {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 10px;
    width: 100%;

    .label {
      width: 40%;
    }

    .config-box {
      width: 60%;

      .input-box {
        width: 85%;
      }

      .sub {
        margin-left: 5px;
      }
    }
  }
}
</style>
